<template>
  <view :data-theme="globPrimary">
    <exam-navbar-category @change="handleEaxmChange" :categoryId="categoryId" :title="title"></exam-navbar-category>
    <mescroll-body style='background: rgb(245, 245, 245);padding-top: 20rpx;padding-bottom: 0;'
      ref="mescrollRef"
      :height="mescrollHeight"
      :down="downOption"
      :up="upOption"
      @init="mescrollInit"
      @down="downCallback"
      @up="getSpecialList"
    >
      <view class="special-list">
        <special-collapse-item
          v-for="item in specialList"
          :key="item.id"
          :item="item"
          :data="item"
          :module-id="moduleId"
        ></special-collapse-item>
<!--        <special-collapse-item-->
<!--          v-for="item in specialList"-->
<!--          :key="item.id"-->
<!--          :item="item"-->
<!--          :data="item"-->
<!--          :module-id="moduleId"-->
<!--        ></special-collapse-item>-->
<!--        <view class="line"></view>-->
<!--        <view class="dot"></view>-->
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import examNavbarCategory from '../components/exam-navbar-category.vue'
import specialCollapseItem from './components/special-collapse-item.vue'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  components: {
    examNavbarCategory,
    specialCollapseItem,
  },
  data() {
    return {
      downOption: { auto: false },
      upOption: { auto: false },
      categoryId: 0, // 分类id
      moduleId: 0, // 板块id
      specialList: [], // 列表
      title: '', // 列表
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    // 导航中间的标题的样式
    mescrollHeight() {
      let windowHeight = this.$u.sys().windowHeight
      return windowHeight - this.globNavbarHeight - this.globStatusBarHeight + 'px'
    },
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    uni.$u.route({ type: 'tab', url: 'pages/exam/index' })
    return true
  },
  onLoad(option) {
    this.moduleId = option.id
    this.categoryId = option.category_id
    this.title = option.title
    // this.getSpecialList({ num: 1, size: 10 }) // 调用方法并传递初始分页参数
  },
  onShow() {
    if (this.categoryId && this.mescroll) {
      this.mescroll.resetUpScroll()
    }
  },
  methods: {
    getSpecialList(page) {
      this.$edu.api
        .getSpecialList({
          module_id: this.moduleId,
          category: this.categoryId,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          let list = data.data
          this.mescroll.endSuccess(list.length)
          if (page.num == 1) this.specialList = []
          this.specialList = this.specialList.concat(list)
        })
    },
    handleEaxmChange(id) {
      this.categoryId = id
      if (this.mescroll) {
        this.mescroll.resetUpScroll() // 只有在 mescroll 已经存在时才调用
      }
    },
  },
}
</script>
<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.special-list {
  position: relative;
  margin: 0 30rpx;
  .line {
    position: absolute;
    left: 15rpx;
    top: 40rpx;
    bottom: 10rpx;
    border-left: 1px solid #e4e7ed;
    transform: scaleX(0.5);
  }
  .dot {
    position: absolute;
    left: 15rpx;
    bottom: 10rpx;
    margin-left: -6rpx;
    width: 12rpx;
    height: 12rpx;
    background-color: #e4e7ed;
    border-radius: 6rpx;
  }
}

</style>
